<template>
  <div class="">
   <div class="manager_pages bg_F4F6F9" :style="{height:winHeight - 152 + 'px'}">
     <div class="manager_second_box">
     <div class="manager_page width_1180 bg_fff clear">
       <div class="manager_left float_left">
         <div class="left_nav"><button type="button" class="nav_span nav_active" @click="manager_nav('apply',$event)">加盟商申请</button></div>
         <div class="left_nav margin_top_20"><button type="button" class="nav_span" @click="manager_nav('consult',$event)">问题与咨询</button></div>
       </div>
       <!--加盟商申请-->
       <div class="manager_right float_left" id="apply_list_scroll" v-if="apply_true" :infinite-scroll="apply_scroll_fun">
         <!--加盟商申请thead-->
         <ul class="manager_thead clear">
           <li class="apply_time">申请提交时间</li>
           <li class="apply_name">申请人姓名</li>
           <li class="apply_phone">申请人手机</li>
           <li class="apply_address">申请代理地区</li>
           <li class="company_name">公司名称</li>
         </ul>
         <!--申请列表,滚动组件-->
         <div class="apply_list_box" :style="{height:winHeight - 226 + 'px'}">
           <scrollApply></scrollApply>
         </div>
       </div>
       <!--咨询-->
       <div class="manager_right float_left" v-else>
         <!--问题咨询thead-->
         <ul class="consult_thead clear">
           <li class="consult_time">咨询提交时间</li>
           <li class="consult_name">咨询人姓名</li>
           <li class="consult_phone">咨询人手机</li>
           <li class="consult_content">咨询内容</li>
         </ul>
         <!--咨询列表-->
         <div class="consult_list_box" :style="{height:winHeight - 226 + 'px'}">
           <scrollConsult></scrollConsult>
         </div>
       </div>
     </div>
     </div>
       <!--底部页脚-->
    <smFoot></smFoot>
   </div>
  </div>
</template>

<script>
  import smFoot from '@/components/foot/sm_foot'
  import scrollApply from '@/components/modal/scroll_agent_modal'
  import scrollConsult from '@/components/modal/scroll_consult_modal'
  export default {
    name: 'manager',
    components: {
        scrollApply,
      scrollConsult,
      smFoot
    },
    data(){
        return{
            loaded_:true
        }
    },
    methods:{
        /**
         * 点击加盟商申请/问题咨询切换
         * apply加盟商申请
         * consult问题咨询
         * **/
        manager_nav(type,e){
            let that = window.event || e;
            let that_ = this;
            if(type == 'apply'){
                $(".nav_span").removeClass("nav_active");
                $(that.currentTarget).addClass("nav_active");
                that_.apply_true = true;
            }else if (type == 'consult'){
                $(".nav_span").removeClass("nav_active");
                $(that.currentTarget).addClass("nav_active");
                that_.apply_true = false;
            }
        },
    },
    data () {
      return {
        apply_true: true,
        winHeight:""
      }
    },
    mounted(){
        //执行请求
        this.manager_nav();
        //计算视窗高
        let window_height = document.documentElement.clientHeight;
        this.winHeight = window_height;
        $("body").css({"height":window_height,"backgroundColor":"#F4F6F9"});
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .manager_pages{
    /*margin-bottom: 10px;*/
    border: 1px solid rgba(0,0,0,0);
    margin: 12px auto;
  }
  .manager_second_box{
    height: 100%;
  }
  .manager_page{
    height: 100%;
    margin: 0 auto;
  }
  .manager_left{
    border-radius: 4px;
    padding-top: 44px;
    width: 180px;
    box-shadow: 2px 2px 8px #D8DBE2;
    min-height: 566px;
    height: 100%;
  }
  .manager_left .nav_span{
    border-left: 4px solid #ffffff;
    padding-left: 8px;
    background: no-repeat;
  }
  .manager_left .nav_active{
    border-left: 4px solid #2577EF;
    color: #2577EF;
  }
  .manager_right{
    width: calc(100% - 180px);
    min-height: 566px;
    height: 100%;
    border-radius: 4px;
    box-shadow: 2px 2px 8px #D8DBE2;
    position: relative;
  }

  .manager_thead,.consult_thead {
    width: 100%;
    padding-left: 20px;
    border: 1px solid #E6E8EB;
    background: -webkit-linear-gradient(#F8F8F8, #F5F5F5); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#F8F8F8, #F5F5F5); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#F8F8F8, #F5F5F5); /* Firefox 3.6 - 15 */
    background: linear-gradient(#F8F8F8, #F5F5F5); /* 标准的语法 */
  }
  .manager_thead li,.consult_thead li{
    text-align: left;
    height: 60px;
    line-height: 60px;
  }
  .apply_time{
    width: 18%;
  }
  .apply_name{
    width: 18%;
  }
  .apply_phone{
    width: 18%;
  }
  .apply_address{
    width: 23%;
  }
  .company_name{
    width: 23%;
  }
  .apply_list_box,.consult_list_box{
    /*height: 100%;*/
  }

  .consult_time{
    width: 23%;
  }
  .consult_name{
    width: 23%;
  }
  .consult_phone{
    width: 23%;
  }
  .consult_content{
    width: 31%;
  }
</style>
